<template>
  <div class="wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/5-4'}">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/5-4'}">模块管理</el-breadcrumb-item>
      <el-breadcrumb-item>模块编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="formInline" class="moduleadd" :rules="rules" ref="formInline">
      <div>
        <el-form-item label="模块名称" class="elform" prop="management">
          <el-input v-model="formInline.management"></el-input>
        </el-form-item>
        <el-form-item label="模块类别" class="elform" prop="type">
         <el-input v-model="modulename" :disabled="true"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="Icon" class="elform" prop="icon">
          <el-input v-model="formInline.icon"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="是否显示" class="elform" prop="Menuid">
          <el-select v-model="formInline.Menuid">
            <el-option
              v-for="item in formInline.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="URL地址" class="elform" prop="url">
          <el-input v-model="formInline.url"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-table
          :data="formInline.sonicon"
          class="table">
          <el-table-column type="index" label="序号">

          </el-table-column>
          <el-table-column
            label="子模块名称"
            width="180">
            <template slot-scope="scope">
              <el-input v-show="scope.row.edit" size="small" v-model="scope.row.modelName"></el-input>
              <span v-show="!scope.row.edit">{{ scope.row.modelName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="子模块url"
            width="180">
            <template slot-scope="scope">
              <el-input v-show="scope.row.edit" size="small" v-model="scope.row.modelUrl"></el-input>
              <span v-show="!scope.row.edit">{{ scope.row.modelUrl }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="子模块id"
            width="180">
            <template slot-scope="scope">
              <!--<el-autocomplete-->
                <!--class="inline-input"-->
                <!--v-model="scope.row.id"-->
                <!--:fetch-suggestions="querySearch"-->
                <!--placeholder="请输入内容"-->
                <!--v-show="scope.row.edit"-->
              <!--&gt;</el-autocomplete>-->
              <el-select v-model="scope.row.id" placeholder="请选择" v-show="scope.row.edit" @change="handlechild">
                <el-option
                  v-for="item in childids"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span v-show="!scope.row.edit">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click='scope.row.edit=true' v-show="!scope.row.edit">编辑</el-button>
              <el-button type="text" @click='scope.row.edit=false' v-show="scope.row.edit">完成</el-button>
              <el-button type="text" @click="handledel(scope.row,scope.$index)">删除</el-button>
              <el-button type="text" @click="handleinsert(scope.row,scope.$index)">添加子模块</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-form-item>
          <el-button type="primary" @click="goback">返回</el-button>
          <el-button type="warning" @click="submitForm('formInline')">保存</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
  import {
    checkmodule,editmodule
  } from '@/api/navbar/navbar'
  export default {
    name: "ModuleEdit",
    data() {
      return {
        child: '',
        childids:[],
        modulename:'父模块',
        formInline: {
          management: '',
          fatherId: '',
          icon: '',
          Menuid: '',
          order: '',
          url: '',
          type: '',
          sonicon:[{
            index:'1-1',
            name:'跟读列表',
            edit:false,
            show:'显示'
          }],
          options: [{
            value: '显示',
            label: '显示'
          }, {
            value: '不显示',
            label: '不显示'
          }]
        },
        rules: {
          management: [
            {
              required: true, message: '请输入模块名称', trigger: 'blur'
            },
            {pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '请输入中文', trigger: 'blur'},
            {min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'},
          ],
          fatherId: [
            {
              required: true, message: '请输入父模块ID', trigger: 'blur'
            }
          ],
          icon: [
            {
              required: true, message: '请输入Icon名称', trigger: 'blur'
            }
          ],
          Menuid: [
            {
              required:true, message: '请选择是否显示', trigger: 'change'
            }
          ],
          order: [
            {
              required: true, message: '请输入顺序', trigger: 'blur'
            }
          ],
          url: [
            {
              required: true, message: '请输入url', trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {
      value: function () {
        return this.formInline.type
      }
    },
    watch: {
      value: function (newValue, oldValue) {
        if (newValue == '选项1') {
          this.child = false;
          return false;
        } else {
          this.child = true;
          return true;
        }
      }
    },
    mounted(){
      this.getModule();
    },
    methods: {
      handlechild(val){
        console.log(val);
      },
      getModule(){
        this.childids=JSON.parse(this.$route.query.childid)
        localStorage.moduleid=this.$route.query.index?this.$route.query.index:localStorage.moduleid;
        let id=this.$route.query.index?this.$route.query.index:localStorage.moduleid;
       let params={};
       params.id=id;
       let _this=this;
        checkmodule(params).then(function (res) {
          console.log(res);
          _this.formInline.management=res.data.modelName;
          _this.formInline.icon=res.data.modelIcon;
          _this.formInline.url=res.data.modelUrl;
         for(let item of res.data.sonlist){
           item.edit=false;
           item.id=item.id.toString()
         }
          _this.formInline.sonicon=res.data.sonlist;
        });
      },
      handleinsert(row,index){
        console.log(row);
        console.log(index);
        let item={
          edit:false,
          menuid:1,
          modelName:'',
          modelUrl:'',
          modelPart:'',
          modelNode:'',
          id:'',
          createBy:'',
          modelIcon:''
        };
        this.formInline.sonicon.splice(index+1,0,item)
      },
      handledel(row,index){
        this.$confirm('删除后将导致子模块无法显示，是否继续？','警告',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error',
          center: true
        }).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.formInline.sonicon.splice(index,1);
        }).catch(()=>{
          this.$message({
            type: 'warning',
            message: '已取消删除'
          });
        });
      },
      submitForm(formInline) {
        this.$refs[formInline].validate((valid) => {
          if (valid) {
            for(let item of this.formInline.sonicon){
              let params={};
              params.modelName=item.modelName;
              params.modelUrl=item.modelUrl;
              let id=item.id;
              console.log(params);
              console.log(id);
              this.formInline.order+=item.id+',';
              editmodule(id,params).then(function (res) {
                console.log(res);
              })
            }
            let params={};
            let id=this.$route.params.index?this.$route.params.index:localStorage.moduleid;
            params.modelName=this.formInline.management;
            params.modelIcon=this.formInline.icon;
            switch (this.formInline.Menuid){
              case "显示":
                params.menuid=1;
                break;
              case "不显示":
                params.menuid=2
            }
            let _this=this;
            params.modelUrl=this.formInline.url;
            params.modelPart=this.formInline.order;
            editmodule(id,params).then(function (res) {
              _this.$router.push({name:'ModuleManagement'})
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      goback(){
        this.$router.push({name:'ModuleManagement'})
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/css3.less";
  @import "~styles/variables.less";
   .table{
     width:80%;
     margin:20px 0px;
   }
  .wrapper {
    .w100;
    .moduleadd {
      padding: 50px 100px;
      .elform {
        width: 300px;
        /deep/ .el-form-item__label {
          width: 80px;
        }
      }
    }
  }
</style>
